<template>
  <section>
    <el-container style="height:auto;border: 1px solid #eee">
      <el-header style="text-align: left; font-size: 12px;height: auto">
        <el-collapse>
          <el-collapse-item title="编辑总结" name="1">
            <div v-if="type === 'show'" v-html="template.template">
              <!--{{template.template}}-->
            </div>
            <div v-else>
              <TextEditor v-model="template.template" :editorToolbar="customToolbar"></TextEditor>
              <el-button type="text" @click="saveUpdate" style="float: right;margin-right: 30px">保存并更新</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-header>
    </el-container>
    <el-container style="height: 400px; border: 1px solid #eee;margin-top: 10px">
      <el-main>
        <el-pagination v-show="totalPage>0" style="margin-top:10px;" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"> </el-pagination>
        <el-row>
          <QaViewController v-for="section of selPage.sections" :key="section.key" :question="section" ></QaViewController>
        </el-row>
      </el-main>
    </el-container>
  </section>
</template>

<script>
  import  TextEditor from '@/components/TextEditor'
  import { mapActions} from 'vuex'
  // import QaEditControler from "@/components/health_check/edit/index";
  import QaViewController from "./view/index";
  export default {
    name: "answerDetail",
    components:{
      // QaEditControler,
      QaViewController,TextEditor},
    props: ['examineItem','type'],
    data(){
      return {
        selPage:{},
        totalPage:0,
        customToolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['image','code-block']],
        template:{
          template:'',
          isEnable:false,
        },
      }
    },
    watch: {
    },
    computed:{
    },
    created(){
      console.log('类型————————————————————',this.type)
      this.template.template = this.examineItem.summary
      // this.getExamineItem()
      this.getAnswer()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getAnswer(val-1)
      },
      getAnswer(pageNo){
        this.fetch({name:"getAnswer",data:{answerId:this.examineItem.data.answerId}})
          .then(res=>{
            console.log(res)
            this.selPage = res.answerPages[pageNo?pageNo:0]
            this.selPage.sections = JSON.parse(this.selPage.metadata)
            this.totalPage = res.answerPages.length
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      saveUpdate(){
        //更新体检项内总结
        // docSumExamineItem
        this.fetch({name:"docSumExamineItem",data:{id:this.examineItem.id,summary:this.template.template}})
          .then(res=>{
            console.log(res)
            this.examineItem.summary = res.summary
            console.log(this.$emit('close'))
            this.$emit('close')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
